<template>
  <div id="toolbar-container"><!-- 工具栏 --></div>
  <div id="editor-container" :style="{ height: height + 'px', width: '100%' }">
    <!-- 编辑器 -->
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch } from "vue";
const emit = defineEmits(["update:modelValue", "onCreated"]);
const props = withDefaults(
  defineProps<{
    editorConfig: any;
    toolbarConfig: any;
    height: number;
    modelValue: string;
  }>(),
  {
    height: 400,
  }
);
watch(
  () => props.modelValue,
  () => {
    editor.setHtml(props.modelValue);
  }
);

const { createEditor, createToolbar } = window.wangEditor;

let editor: any = null;
// 创建富文本编辑器实例
const initEditor = () => {
  // 创建编辑器实例
  editor = createEditor({
    selector: "#editor-container",
    html: "",
    config: {
      placeholder: "请输入内容...",
      onCreated(editor: any) {
        emit("onCreated", editor);
      },
      onChange(editor: any) {
        // 也可以同步到 <textarea>
        emit("update:modelValue", editor.getHtml());
      },
      ...props.editorConfig,
    },
    mode: "default", // or 'simple'
  });

  // 创建 工具栏实例
  const toolbar = createToolbar({
    editor,
    selector: "#toolbar-container",
    config: props.toolbarConfig,
    mode: "default", // or 'simple'
  });
  editor.setHtml(props.modelValue);
};

onMounted(() => {
  initEditor();
});
</script>

<style scoped></style>
